
<template>
  <div class="realtime-flow">
    <div class="flow-header">
      <h3>实时分流动态</h3>
      <div class="flow-status">
        <div class="status-indicator active">
          <div class="pulse-dot"></div>
          <span>系统运行正常</span>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="flow-main-content">
      <!-- 人员统计信息区域 -->
      <div class="flow-info-section">
        <!-- 全省罪犯分布 -->
        <div class="info-panel detention-panel" @mouseenter="showGenderToast" @mouseleave="hideGenderToast">
          <div class="panel-header">
            <h4>全省罪犯分布</h4>
          </div>
          <div class="panel-content">
            <div class="stat-row">
              <span class="stat-label">在册</span>
              <span class="stat-value">54684人</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">在押</span>
              <span class="stat-value">49663人</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">收押</span>
              <span class="stat-value">80人</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">分流</span>
              <span class="stat-value">90人</span>
            </div>
            <!-- 全省罪犯分布饼图 -->
            <!-- <div class="chart-container">
              <div id="detention-chart" class="detention-chart"></div>
            </div> -->
          </div>
        </div>

        <!-- 监狱床铺预览 -->
        <div class="info-panel prison-panel">
          <div class="panel-header">
            <h4>监狱床铺预览</h4>
          </div>
          <div class="panel-content">
            <div class="bed-stats-header">
              <span class="bed-label">各监狱床铺总数</span>
              <span class="bed-value">剩余床铺数/总</span>
            </div>
            <!-- 监狱床铺使用率柱状图 -->
            <!-- <div class="chart-container">
              <div id="bed-chart" class="bed-chart"></div>
            </div> -->
            <div class="bed-list" ref="bedList">
              <div
                v-for="prison in prisonBedStats"
                :key="prison.name"
                class="bed-item"
              >
                <span class="prison-name">{{ prison.name }}</span>
                <div class="bed-capacity-container">
                  <!-- 电池容量样式 -->
                  <div class="bed-capacity-bar">
                    <div
                      class="bed-capacity-fill"
                      :style="getCapacityStyle(prison)"
                    ></div>
                    <div class="bed-capacity-dot" :style="getCapacityDotStyle(prison)"></div>
                  </div>
                  <!-- 数字显示：剩余/总 -->
                  <span class="bed-numbers">{{ prison.available }}/{{ prison.total }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 背景粒子效果 -->
    <div class="background-particles">
      <div
        v-for="bgParticle in backgroundParticles"
        :key="bgParticle.id"
        class="bg-particle"
        :style="{
          '--x': bgParticle.x + '%',
          '--y': bgParticle.y + '%',
          '--delay': bgParticle.delay + 's',
          '--duration': bgParticle.duration + 's'
        }"
      ></div>
    </div>
  </div>
</template>

<script>
import { Chart } from '@antv/g2'

export default {
  name: 'RealtimeFlow',
  props: {
    realtimeData: {
      type: Object,
      default: () => ({
        onlineUsers: 12543,
        activeProjects: 89,
        dataFlow: '2.4GB/s',
        cpuUsage: 67
      })
    }
  },
  data() {
    return {
      totalFlow: 0,
      currentStats: {
        onlineUsers: 0,
        activeProjects: 0,
        dataFlow: '0GB/s',
        cpuUsage: 0,
        onlineUsersTrend: 0,
        activeProjectsTrend: 0,
        cpuUsageTrend: 0
      },
      // 全省罪犯分布统计
      criminalStats: {
        registered: 54684,
        inCustody: 49663,
        detained: 80,
        distributed: 90
      },
      // 监狱床铺统计
      prisonBedStats: [
        { name: '阜阳监狱', total: 3000, available: 812 },
        { name: '安庆监狱', total: 4000, available: 1192 },
        { name: '宿州监狱', total: 3000, available: 711 },
        { name: '蚌埠监狱', total: 3000, available: 632 },
        { name: '合肥监狱', total: 5000, available: 1233 },
        { name: '青山监狱', total: 3000, available: 1012 },
        { name: '蜀山监狱', total: 3600, available: 566 },
        { name: '庐江监狱', total: 3000, available: 761 },
        { name: '铜陵监狱', total: 3000, available: 1211 },
        { name: '女子监狱', total: 3000, available: 811 },
        { name: '安徽省未成年犯管教所', total: 3000, available: 789 },
        { name: '潜川监狱', total: 3000, available: 439 },
        { name: '马鞍山监狱', total: 3000, available: 1092 },
        { name: '淝河监狱', total: 3800, available: 1548 },
        { name: '滁州监狱', total: 3000, available: 578 },
        { name: '九龙监狱', total: 4000, available: 812 },
        { name: '宣城监狱', total: 3000, available: 1099 },
        { name: '淮南女子监狱', total: 2800, available: 678 },
        { name: '义城监狱', total: 2000, available: 892 }
      ],
      // 床铺列表滚动定时器
      bedScrollTimer: null,
      // 滚动方向：1表示向下，-1表示向上
      scrollDirection: 1,
      // G2图表实例
      detentionChart: null,
      bedChart: null,
      // 核心粒子
      coreParticles: [],
      // 数据节点
      dataNodes: [
        { id: 1, x: 15, y: 20, value: 3240, label: '北区', active: true },
        { id: 2, x: 85, y: 25, value: 2156, label: '南区', active: true },
        { id: 3, x: 20, y: 80, value: 1890, label: '东区', active: true },
        { id: 4, x: 80, y: 75, value: 3257, label: '西区', active: false }
      ],
      // 活跃数据流
      activeFlows: [],
      // 背景粒子
      backgroundParticles: [],
      // 更新定时器
      updateTimer: null
    }
  },
  mounted() {
    this.initializeParticles()
    this.initializeFlows()
    this.startDataUpdate()
    this.initializeCharts()

    // 数据渲染完成后延时开始滚动
    this.$nextTick(() => {
      setTimeout(() => {
        this.startBedAutoScroll()
      }, 2000) // 延时2秒开始滚动
    })
  },
  beforeDestroy() {
    if (this.updateTimer) {
      clearInterval(this.updateTimer)
    }
    if (this.bedScrollTimer) {
      clearInterval(this.bedScrollTimer)
    }
    // 销毁图表实例
    if (this.detentionChart) {
      this.detentionChart.destroy()
    }
    if (this.bedChart) {
      this.bedChart.destroy()
    }
  },
  computed: {
    // 获取导入的数据
    importedData() {
      return this.$store.getters['dataImport/getImportedData']
    },

    // 计算城市流量统计
    cityFlowStats() {
      if (!this.importedData || this.importedData.length === 0) {
        return {}
      }

      const stats = {}

      // 统计每个城市的总流量
      this.importedData.forEach(item => {
        // 源城市
        if (!stats[item.sourceCity]) {
          stats[item.sourceCity] = {
            totalFlow: 0,
            connections: 0,
            lng: item.sourceLng,
            lat: item.sourceLat
          }
        }
        stats[item.sourceCity].totalFlow += item.flowValue
        stats[item.sourceCity].connections += 1

        // 目标城市
        if (!stats[item.targetCity]) {
          stats[item.targetCity] = {
            totalFlow: 0,
            connections: 0,
            lng: item.targetLng,
            lat: item.targetLat
          }
        }
        stats[item.targetCity].totalFlow += item.flowValue
        stats[item.targetCity].connections += 1
      })

      return stats
    },

    // 计算数据流连接
    flowConnections() {
      if (!this.importedData || this.importedData.length === 0) {
        return []
      }

      return this.importedData.map((item, index) => ({
        id: item.id,
        sourceCity: item.sourceCity,
        targetCity: item.targetCity,
        sourceLng: item.sourceLng,
        sourceLat: item.sourceLat,
        targetLng: item.targetLng,
        targetLat: item.targetLat,
        active: true,
        delay: index * 0.2 // 错开显示
      }))
    },

    // 计算实时统计数据
    computedStats() {
      if (!this.importedData || this.importedData.length === 0) {
        return {
          onlineUsers: 0,
          activeProjects: 0,
          dataFlow: '0GB/s',
          cpuUsage: 0
        }
      }

      // 使用数据条数和城市数量来模拟流量统计
      const dataCount = this.importedData.length
      const uniqueCities = new Set([
        ...this.importedData.map(item => item.sourceCity),
        ...this.importedData.map(item => item.targetCity)
      ]).size

      // 基于数据量和城市数量计算模拟流量
      const simulatedFlow = dataCount * uniqueCities * 1000

      // 模拟一些动态数据
      const baseOnlineUsers = Math.floor(simulatedFlow / 100) + uniqueCities * 100
      const baseActiveProjects = uniqueCities + Math.floor(dataCount / 5)

      return {
        onlineUsers: baseOnlineUsers,
        activeProjects: baseActiveProjects,
        dataFlow: this.formatDataFlow(simulatedFlow),
        cpuUsage: Math.floor(30 + Math.random() * 40) // 30-70%的CPU使用率
      }
    },

    // 滚动面板配置
    scrollBoardConfig() {
      return {
        // header: ['数据分流线路'],
        data: this.scrollBoardData,
        index: false,
        columnWidth: [400],
        align: ['left'],
        headerBGC: 'rgba(0, 255, 255, 0.1)',
        headerHeight: 35,
        rowNum: 10,
        waitTime: 2000,
        carousel: 'single'
      }
    },

    // 滚动面板数据
    scrollBoardData() {
      if (!this.importedData || this.importedData.length === 0) {
        return []
      }

      return this.importedData.map((item, index) => [
        `${item.sourceCity} → ${item.targetCity}`
      ])
    }
  },

  watch: {
    realtimeData: {
      handler(newData) {
        this.updateStats(newData)
      },
      deep: true,
      immediate: true
    },

    // 监听importedData变化
    importedData: {
      handler() {
        this.updateFromImportedData()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 将经纬度转换为容器内的相对位置
    getNodePosition(lng, lat) {
      // 安徽地区的经纬度范围大致是：
      // 经度：115°E - 120°E
      // 纬度：29°N - 35°N

      // 计算相对位置（百分比）
      const lngRange = { min: 115, max: 120 }
      const latRange = { min: 29, max: 35 }

      const x = ((lng - lngRange.min) / (lngRange.max - lngRange.min)) * 100
      const y = ((latRange.max - lat) / (latRange.max - latRange.min)) * 100

      // 确保在合理范围内
      return {
        x: Math.max(5, Math.min(95, x)),
        y: Math.max(5, Math.min(95, y))
      }
    },

    // 初始化粒子系统
    initializeParticles() {
      // 核心粒子
      this.coreParticles = Array.from({ length: 12 }, (_, i) => ({
        id: i,
        angle: i * 30,
        delay: Math.random() * 3,
        duration: 2 + Math.random() * 2
      }))

      // 背景粒子
      this.backgroundParticles = Array.from({ length: 20 }, (_, i) => ({
        id: i,
        x: Math.random() * 100,
        y: Math.random() * 100,
        delay: Math.random() * 10,
        duration: 15 + Math.random() * 10
      }))
    },

    // 初始化数据流
    initializeFlows() {
      this.activeFlows = [
        { id: 1, startX: 50, startY: 50, endX: 15, endY: 20, delay: 0, active: true },
        { id: 2, startX: 50, startY: 50, endX: 85, endY: 25, delay: 0.5, active: true },
        { id: 3, startX: 50, startY: 50, endX: 20, endY: 80, delay: 1, active: true },
        { id: 4, startX: 50, startY: 50, endX: 80, endY: 75, delay: 1.5, active: false }
      ]
    },

    // 开始数据更新
    startDataUpdate() {
      this.updateTimer = setInterval(() => {
        this.updateRealtimeData()
      }, 3000)
    },

    // 更新实时数据
    updateRealtimeData() {
      // 如果有importedData，则基于真实数据更新；否则使用模拟数据
      if (this.importedData && this.importedData.length > 0) {
        // 基于importedData更新 - 主要是更新趋势和一些动态效果
        const oldStats = { ...this.currentStats }
        const stats = this.computedStats

        // 轻微随机波动，保持数据相对稳定
        const fluctuation = 0.05 // 5%的波动
        this.currentStats.onlineUsers = Math.floor(stats.onlineUsers * (1 + (Math.random() - 0.5) * fluctuation * 2))
        this.currentStats.activeProjects = Math.floor(stats.activeProjects * (1 + (Math.random() - 0.5) * fluctuation * 2))
        this.currentStats.cpuUsage = Math.floor(stats.cpuUsage * (1 + (Math.random() - 0.5) * fluctuation * 2))

        // 确保数据在合理范围内
        this.currentStats.onlineUsers = Math.max(0, this.currentStats.onlineUsers)
        this.currentStats.activeProjects = Math.max(0, this.currentStats.activeProjects)
        this.currentStats.cpuUsage = Math.max(0, Math.min(100, this.currentStats.cpuUsage))

        // 计算趋势
        this.currentStats.onlineUsersTrend = this.currentStats.onlineUsers - oldStats.onlineUsers
        this.currentStats.activeProjectsTrend = this.currentStats.activeProjects - oldStats.activeProjects
        this.currentStats.cpuUsageTrend = this.currentStats.cpuUsage - oldStats.cpuUsage

        // 更新总流量（基于数据条数和城市数量的模拟计算）
        const dataCount = this.importedData.length
        const uniqueCities = new Set([
          ...this.importedData.map(item => item.sourceCity),
          ...this.importedData.map(item => item.targetCity)
        ]).size
        this.totalFlow = dataCount * uniqueCities * 1000
      } else {
        // 模拟数据模式
        const oldStats = { ...this.currentStats }

        this.currentStats.onlineUsers += Math.floor(Math.random() * 200) - 100
        this.currentStats.activeProjects += Math.floor(Math.random() * 20) - 10
        this.currentStats.cpuUsage = Math.max(10, Math.min(95, this.currentStats.cpuUsage + Math.floor(Math.random() * 10) - 5))

        // 确保数据在合理范围内
        this.currentStats.onlineUsers = Math.max(10000, Math.min(20000, this.currentStats.onlineUsers))
        this.currentStats.activeProjects = Math.max(50, Math.min(150, this.currentStats.activeProjects))

        // 计算趋势
        this.currentStats.onlineUsersTrend = this.currentStats.onlineUsers - oldStats.onlineUsers
        this.currentStats.activeProjectsTrend = this.currentStats.activeProjects - oldStats.activeProjects
        this.currentStats.cpuUsageTrend = this.currentStats.cpuUsage - oldStats.cpuUsage

        // 更新总流量
        this.totalFlow = this.currentStats.onlineUsers + this.currentStats.activeProjects * 100

        // 随机激活/停用数据节点
        this.dataNodes.forEach(node => {
          if (Math.random() > 0.8) {
            node.active = !node.active
          }
          // 更新节点值
          node.value += Math.floor(Math.random() * 100) - 50
          node.value = Math.max(1000, Math.min(5000, node.value))
        })

        // 随机激活数据流
        this.activeFlows.forEach(flow => {
          if (Math.random() > 0.7) {
            flow.active = !flow.active
          }
        })
      }
    },

    // 从importedData更新数据
    updateFromImportedData() {
      if (!this.importedData || this.importedData.length === 0) {
        this.totalFlow = 0
        this.currentStats = {
          onlineUsers: 0,
          activeProjects: 0,
          dataFlow: '0GB/s',
          cpuUsage: 0,
          onlineUsersTrend: 0,
          activeProjectsTrend: 0,
          cpuUsageTrend: 0
        }
        return
      }

      // 更新总流量（基于数据条数和城市数量的模拟计算）
      const dataCount = this.importedData.length
      const uniqueCities = new Set([
        ...this.importedData.map(item => item.sourceCity),
        ...this.importedData.map(item => item.targetCity)
      ]).size
      this.totalFlow = dataCount * uniqueCities * 1000

      // 更新统计数据
      const stats = this.computedStats
      const oldStats = { ...this.currentStats }

      this.currentStats = {
        ...stats,
        onlineUsersTrend: stats.onlineUsers - oldStats.onlineUsers,
        activeProjectsTrend: stats.activeProjects - oldStats.activeProjects,
        cpuUsageTrend: stats.cpuUsage - oldStats.cpuUsage
      }

      // 数据更新后延时重启滚动
      this.restartBedScroll()
    },

    // 更新统计数据
    updateStats(newData) {
      this.currentStats = {
        ...this.currentStats,
        ...newData
      }
    },

    // 格式化数字
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toString()
    },

    // 格式化数据流量
    formatDataFlow(flowValue) {
      if (flowValue >= 1000000) {
        return (flowValue / 1000000).toFixed(1) + 'GB/s'
      } else if (flowValue >= 1000) {
        return (flowValue / 1000).toFixed(1) + 'MB/s'
      } else {
        return flowValue + 'KB/s'
      }
    },

    // 初始化图表
    initializeCharts() {
      this.$nextTick(() => {
        // this.initDetentionChart()
      })
    },

    // 初始化待收押人员统计饼图
    initDetentionChart() {
      const container = document.getElementById('detention-chart')
      if (!container) return

      this.detentionChart = new Chart({
        container: 'detention-chart',
        autoFit: true,
        height: 180,
        theme: 'dark'
      })

      const data = [
        { type: '在册', value: this.criminalStats.registered },
        { type: '在押', value: this.criminalStats.inCustody },
        { type: '收押', value: this.criminalStats.detained },
        { type: '分流', value: this.criminalStats.distributed }
      ]

      this.detentionChart
        .interval()
        .data(data)
        .coordinate({ type: 'theta', innerRadius: 0.4 }) // 环形饼图，内径0.4
        .encode('y', 'value')
        .encode('color', 'type')
        .scale('color', {
          range: ['#00ffff', '#ff00ff', '#ffff00', '#00ff88'],
          domain: ['在册', '在押', '收押', '分流']
        })
        .legend('color', {
          position: 'bottom',
          itemMarker: 'circle',
          itemMarkerSize: 8,
          title: false,
          itemLabelFill: '#ffffff',
          itemLabelFontSize: 12,
          itemSpacing: 20
        })
        .axis(false) // 不显示坐标轴
        .tooltip({
          showTitle: false,
          items: [
            { field: 'value', name: '数量' },
            { field: 'type', name: '类型' }
          ],
          domStyles: {
            'g2-tooltip': {
              backgroundColor: 'rgba(0, 0, 0, 0.8)',
              border: '1px solid rgba(0, 255, 255, 0.3)',
              borderRadius: '8px',
              boxShadow: '0 4px 20px rgba(0, 255, 255, 0.2)'
            }
          }
        })
        .style('stroke', 'rgba(255, 255, 255, 0.2)')
        .style('strokeWidth', 1)
        .style('shadowColor', 'rgba(0, 255, 255, 0.3)')
        .style('shadowBlur', 8)
        .animate('enter', {
          type: 'waveIn',
          duration: 1200,
          easing: 'ease-in-out'
        })
        .interaction('element-highlight', {
          background: false
        })
        .interaction('tooltip', {
          showCrosshairs: false
        })

      this.detentionChart.render()
    },

    // 重启床铺列表滚动（带延时）
    restartBedScroll() {
      // 先停止当前滚动
      if (this.bedScrollTimer) {
        clearInterval(this.bedScrollTimer)
        this.bedScrollTimer = null
      }

      // 重置滚动方向和位置
      this.scrollDirection = 1
      if (this.$refs.bedList) {
        this.$refs.bedList.scrollTop = 0
      }

      // 延时重新开始滚动
      setTimeout(() => {
        this.startBedAutoScroll()
      }, 1500) // 延时1.5秒重新开始滚动
    },

    // 显示性别Toast
    showGenderToast() {
      this.$messageBox.showGenderToast()
    },

    // 隐藏性别Toast（可选，因为Toast会自动消失）
    hideGenderToast() {
      // Toast会自动消失，这里可以添加额外逻辑
    },

    // 获取容量条样式
    getCapacityStyle(prison) {
      const percentage = (prison.available / prison.total) * 100
      // 根据百分比计算颜色：绿色(100%) -> 红色(0%)
      const red = Math.round(255 * (1 - percentage / 100))
      const green = Math.round(255 * (percentage / 100))
      const blue = 0

      return {
        width: `${percentage}%`,
        backgroundColor: `rgb(${red}, ${green}, ${blue})`,
        boxShadow: `0 0 8px rgba(${red}, ${green}, ${blue}, 0.6)`
      }
    },

    // 获取容量圆点样式
    getCapacityDotStyle(prison) {
      const percentage = (prison.available / prison.total) * 100
      // 根据百分比计算颜色：绿色(100%) -> 红色(0%)
      const red = Math.round(255 * (1 - percentage / 100))
      const green = Math.round(255 * (percentage / 100))
      const blue = 0

      return {
        backgroundColor: `rgb(${red}, ${green}, ${blue})`,
        boxShadow: `0 0 12px rgba(${red}, ${green}, ${blue}, 0.8)`
      }
    },

    // 开始床铺列表自动滚动
    startBedAutoScroll() {
      this.bedScrollTimer = setInterval(() => {
        const bedList = this.$refs.bedList
        if (bedList) {
          const scrollHeight = bedList.scrollHeight
          const clientHeight = bedList.clientHeight
          const scrollTop = bedList.scrollTop

          // 如果内容超出容器高度，进行滚动
          if (scrollHeight > clientHeight) {
            // 计算新的滚动位置
            const newScrollTop = scrollTop + (this.scrollDirection * 1)

            // 检查是否到达顶部或底部
            if (newScrollTop <= 0) {
              // 到达顶部，切换为向下滚动
              this.scrollDirection = 1
              bedList.scrollTop = 0
            } else if (newScrollTop + clientHeight >= scrollHeight) {
              // 到达底部，切换为向上滚动
              this.scrollDirection = -1
              bedList.scrollTop = scrollHeight - clientHeight
            } else {
              // 正常滚动
              bedList.scrollTop = newScrollTop
            }
          }
        }
      }, 50) // 每50ms滚动1px，实现平滑滚动
    }
  }
}
</script>

<style scoped>
.realtime-flow {
  height: 100%;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.flow-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 20px; */
  padding: 0 20px;
}

.flow-header h3 {
  margin: 0;
  color: #00ffff;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.flow-status {
  display: flex;
  align-items: center;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 255, 255, 0.1);
  border-radius: 16px;
  border: 1px solid rgba(0, 255, 255, 0.3);
}

.status-indicator.active {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.3);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #00ff88;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.status-indicator span {
  font-size: 12px;
  color: #00ff88;
  font-weight: 500;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

/* 主内容区域 */
.flow-main-content {
  flex: 1;
  display: flex;
  gap: 20px;
  padding:20px;
  overflow: hidden;
}

/* 人员统计信息区域 */
.flow-info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* min-width: 300px; */
  max-width: 400px;
}

/* 信息面板 */
.info-panel {
  background:
    linear-gradient(135deg,
      rgba(0, 255, 255, 0.08) 0%,
      rgba(255, 0, 255, 0.06) 50%,
      rgba(255, 255, 0, 0.04) 100%
    ),
    rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  overflow: hidden;
  animation: infoPanelSlideIn 0.5s ease-out;
}

@keyframes infoPanelSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-header {
  padding: 15px 20px;
  background: rgba(0, 255, 255, 0.05);
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.panel-header h4 {
  margin: 0;
  color: #00ffff;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}


/* 全省罪犯分布面板 */
.detention-panel .stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.detention-panel .stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #00ffff;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

/* 监狱床铺预览面板 */
.prison-panel .bed-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px  15px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  margin-bottom: 10px;
}

.bed-label,
.bed-value {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bed-list {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

.bed-list::-webkit-scrollbar {
  width: 6px;
}

.bed-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.bed-list::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 255, 0.3);
  border-radius: 3px;
}

.bed-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 255, 0.5);
}

.bed-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.bed-item:hover {
  background: rgba(0, 255, 255, 0.05);
  border-radius: 4px;
  margin: 0 -5px;
  padding: 10px 7px;
}

.prison-name {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  flex: 1;
  margin-right: 12px;
  min-width: 80px;
}

.bed-capacity-container {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
}

.bed-capacity-bar {
  position: relative;
  width: 60px;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(0, 255, 255, 0.3);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.bed-capacity-fill {
  height: 100%;
  border-radius: 5px;
  transition: all 0.5s ease;
  position: relative;
}

.bed-capacity-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
  border-radius: 5px;
  animation: capacityShine 2s ease-in-out infinite;
}

@keyframes capacityShine {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

.bed-capacity-dot {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0, 255, 255, 0.3);
  transition: all 0.5s ease;
  z-index: 2;
}

.bed-capacity-dot::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
}

.bed-numbers {
  font-size: 12px;
  font-weight: 600;
  color: #00ffff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  white-space: nowrap;
  min-width: 45px;
  text-align: center;
}

/* 图表容器样式 */
.chart-container {
  /* margin: 15px 0; */
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 255, 0.1);
}

.detention-chart,
.bed-chart {
  width: 100%;
  height: 100%;
}

/* 主数据流区域 */
.flow-main {
  flex: 1;
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.05) 0%, transparent 70%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 255, 0.2);
  overflow: hidden;
}

/* 中央数据节点 */
.central-node {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.node-core {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 255, 255, 0.8) 0%, rgba(0, 255, 255, 0.2) 50%, transparent 70%),
    linear-gradient(135deg, rgba(0, 255, 255, 0.3) 0%, rgba(255, 0, 255, 0.3) 100%);
  border: 3px solid rgba(0, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: corePulse 3s ease-in-out infinite;
  box-shadow:
    0 0 30px rgba(0, 255, 255, 0.8),
    inset 0 0 30px rgba(0, 255, 255, 0.3);
}

.core-glow {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.2) 0%, transparent 70%);
  animation: coreGlow 4s ease-in-out infinite alternate;
}

.core-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #00ffff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -2px 0 0 -2px;
  animation: particleOrbit var(--duration) linear infinite;
  animation-delay: var(--delay);
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
}

@keyframes particleOrbit {
  from {
    transform: rotate(var(--angle)) translateX(60px) rotate(0deg);
  }
  to {
    transform: rotate(calc(var(--angle) + 360deg)) translateX(60px) rotate(-360deg);
  }
}

@keyframes corePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 30px rgba(0, 255, 255, 0.8),
      inset 0 0 30px rgba(0, 255, 255, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow:
      0 0 50px rgba(0, 255, 255, 1),
      inset 0 0 40px rgba(0, 255, 255, 0.5);
  }
}

@keyframes coreGlow {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

.node-value {
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(0, 255, 255, 1);
  margin-bottom: 4px;
  z-index: 1;
}

.node-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
}

/* 数据流线 */
.flow-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.flow-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #00ffff 50%, transparent 100%);
  opacity: 0;
  animation: flowPulse 3s ease-in-out infinite;
  animation-delay: var(--delay);
}

.flow-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.8) 20%,
    #00ffff 50%,
    rgba(0, 255, 255, 0.8) 80%,
    transparent 100%
  );
  animation: flowMove 2s linear infinite;
}

.flow-line.flow-active {
  opacity: 1;
}

.flow-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #00ffff;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
  animation: particleFlow 2s linear infinite;
}

@keyframes flowPulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes flowMove {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes particleFlow {
  0% {
    transform: translateX(-100%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translateX(0%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) scale(0);
    opacity: 0;
  }
}

/* 数据节点 */
.data-nodes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.data-node {
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  z-index: 5;
}

.node-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 255, 255, 0.6) 0%, rgba(0, 255, 255, 0.1) 70%, transparent 100%),
    linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, rgba(255, 0, 255, 0.2) 100%);
  border: 2px solid rgba(0, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
  cursor: pointer;
}

.node-active .node-circle {
  background:
    radial-gradient(circle, rgba(0, 255, 136, 0.8) 0%, rgba(0, 255, 136, 0.2) 70%, transparent 100%),
    linear-gradient(135deg, rgba(0, 255, 136, 0.3) 0%, rgba(255, 255, 0, 0.3) 100%);
  border-color: rgba(0, 255, 136, 0.7);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
}

.node-value {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
  margin-bottom: 2px;
}

.node-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.node-ring {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 50%;
  animation: nodeRing 3s ease-in-out infinite;
  opacity: 0;
}

.node-active .node-ring {
  opacity: 1;
  animation: nodeRingActive 2s ease-in-out infinite;
}

@keyframes nodeRing {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0;
  }
}

@keyframes nodeRingActive {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.3;
  }
}

/* 底部统计信息 */
.flow-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 0 20px 20px 20px;
}

.stat-metric {
  text-align: center;
  padding: 15px;
  background:
    linear-gradient(135deg,
      rgba(0, 255, 255, 0.1) 0%,
      rgba(255, 0, 255, 0.08) 50%,
      rgba(255, 255, 0, 0.05) 100%
    ),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
    rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-metric:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 255, 255, 0.4);
  box-shadow: 0 8px 25px rgba(0, 255, 255, 0.2);
}

.metric-value {
  font-size: 18px;
  font-weight: 900;
  background:
    linear-gradient(45deg,
      #00ffff 0%,
      #ff00ff 30%,
      #ffff00 60%,
      #00ff00 90%,
      #00ffff 100%
    );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 5px;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  animation: valueGlow 3s ease-in-out infinite;
}

@keyframes valueGlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 100%;
  }
}

.metric-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.metric-trend {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.metric-trend.trend-up {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.3);
}

.metric-trend.trend-down {
  background: rgba(255, 68, 68, 0.2);
  color: #ff4444;
  border: 1px solid rgba(255, 68, 68, 0.3);
}

/* 背景粒子效果 */
.background-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.bg-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(0, 255, 255, 0.3);
  border-radius: 50%;
  animation: bgParticleFloat var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes bgParticleFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translate(10px, -10px) scale(1.2);
    opacity: 0.6;
  }
  50% {
    transform: translate(-5px, -20px) scale(0.8);
    opacity: 0.2;
  }
  75% {
    transform: translate(-15px, -5px) scale(1.1);
    opacity: 0.5;
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .flow-info-section {
    min-width: 250px;
    max-width: 350px;
  }

  .central-node .node-core {
    width: 100px;
    height: 100px;
  }

  .data-node .node-circle {
    width: 70px;
    height: 70px;
  }

  .flow-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .flow-info-section {
    min-width: unset;
    max-width: unset;
  }

  .info-panel {
    flex: 1;
  }

  .bed-list {
    max-height: 200px;
  }

  .bed-capacity-container {
    min-width: 100px;
  }

  .bed-capacity-bar {
    width: 50px;
    height: 10px;
  }

  .bed-capacity-dot {
    width: 14px;
    height: 14px;
    right: -6px;
  }

  .bed-numbers {
    font-size: 11px;
    min-width: 40px;
  }

  .flow-header {
    flex-direction: column;
    gap: 10px;
    padding: 0 15px;
  }

  .flow-main-content {
    flex-direction: column;
    gap: 15px;
    margin: 0 15px 15px 15px;
  }


  .flow-main {
    margin: 0 15px 15px 15px;
  }

  .central-node .node-core {
    width: 80px;
    height: 80px;
  }

  .data-node .node-circle {
    width: 60px;
    height: 60px;
  }

  .flow-stats {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 15px 15px 15px;
  }

  .stat-metric {
    padding: 12px;
  }

  .metric-value {
    font-size: 16px;
  }
}

/* 响应式设计 - 滚动面板 */
@media (max-width: 1200px) {
  .flow-data-list {
    margin: 15px 15px 0 15px;
  }

  .list-header {
    padding: 12px 15px;
  }

  .scroll-board-container {
    padding: 8px;
  }
}

@media (max-width: 768px) {
  .flow-data-list {
    margin: 10px 10px 0 10px;
  }

  .list-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .list-header h4 {
    font-size: 14px;
  }

  .list-count {
    font-size: 11px;
  }

  .scroll-board-container {
    padding: 5px;
  }
}

</style>
